<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="小区名称" prop="communityId">
            <communitySelect v-model="queryParams.communityId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车位号" prop="parkingNumber">
            <el-input
              v-model="queryParams.parkingNumber"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="绑定收费" prop="propertyStatus">
            <el-select
              v-model="queryParams.propertyStatus"
              placeholder="请选择"
            >
              <el-option label="未绑定" :value="0" />
              <el-option label="已绑定" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="0">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              :disabled="!queryParams.communityId"
              type="primary"
              icon="Plus"
              @click="addHandle"
              >添加车位</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          :disabled="!selectedRooms.length"
          @click="generatePropertyFee"
          >生成管理费</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <el-table
      v-loading="loading"
      :data="parkingSpaceList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="50" align="center" />
      <el-table-column
        prop="parkingNumber"
        label="车位编号"
        align="center"
        min-width="100"
      />
      <el-table-column prop="type" label="车位类型" align="center">
        <template #default="scope">
          {{ parkingTypeMap[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区"
        align="center"
        min-width="100"
      >
        <template #default="scope">
          {{ matchCommunity(scope.row.communityId).name }}
        </template>
      </el-table-column>
      <el-table-column prop="propertyStatus" label="收费绑定" align="center">
        <template #default="scope">
          {{ propertyStatusMap[scope.row.propertyStatus] }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realName" align="center" />
      <el-table-column
        prop="roomNum"
        label="绑定详情"
        align="center"
        min-width="200px"
      >
        <template #default="{ row }">
          <div v-if="row.communityMemberId">
            <span>业主：{{ row.realName }}</span>
            <span>小区：{{ row.communityName }}</span>
            <span>房号：{{ row.roomNum }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      />
      <el-table-column
        label="操作"
        width="200"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <el-button
            v-if="row.propertyStatus === 0"
            type="primary"
            link
            @click="bindFeeHandle(row)"
            >绑定收费</el-button
          >
          <el-button v-else type="primary" link @click="unBindFeeHandle(row)"
            >解绑收费</el-button
          >
          <el-button
            v-if="row.communityMemberId"
            link
            type="primary"
            @click="unBindHandle(row)"
            >解除绑定</el-button
          >
          <el-button v-else link type="primary" @click="bindHandle(row)"
            >绑定房屋</el-button
          >
          <el-button link type="primary" @click="deleteHandle(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <addEdit
      v-model="addDialog"
      v-if="addDialog"
      :title="title"
      :row="curRow"
      :communityId="queryParams.communityId"
      @submit="getList"
    />
    <bindRoom
      v-model="bindMemberDialog"
      v-if="bindMemberDialog"
      :communityId="queryParams.communityId"
      :row="curRow"
      @submit="getList"
    />
    <bindFee
      v-model="showBindFee"
      v-if="showBindFee"
      :row="curRow"
      :ids="bindIds"
      @submit="getList"
    />
    <createFee
      v-model="generatePropertyFeeDialog"
      v-if="generatePropertyFeeDialog"
      :ids="selectedRooms"
      @submit="getList"
    />
  </div>
</template>

<script setup name="ParkingSpace">
import { ref, getCurrentInstance } from "vue";
import { ElMessageBox } from "element-plus";
import {
  getParkingSpacePage,
  removeParkingSpace,
  updateBindUnBindMember,
  batchClearFeeConfigToParking,
} from "@/api/realEstateManage";
import { ElMessage } from "element-plus";
import communitySelect from "@/components/communitySelect";
import addEdit from "./addEdit.vue";
import bindRoom from "./bindRoom.vue";
import bindFee from "./bindFee.vue";
import createFee from "./createFee.vue";
import { matchCommunity } from "@/common/match";

const { proxy } = getCurrentInstance();

const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryRef = ref();

const parkingSpaceList = ref([]); // 车位列表
const queryParams = ref({
  communityId: "",
  pageNo: 1,
  pageSize: 10,
});

const addDialog = ref(false);
const bindMemberDialog = ref(false);
const curRow = ref({});
const title = ref("");
const showBindFee = ref(false);
const bindIds = ref([]);

const parkingTypeMap = {
  0: "产权车位",
  1: "公共车位",
  2: "第三方车位",
};
const propertyStatusMap = {
  0: "未绑定",
  1: "已绑定",
};

const getList = () => {
  loading.value = true;
  getParkingSpacePage(queryParams.value)
    .then(({ data }) => {
      parkingSpaceList.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function addHandle() {
  addDialog.value = true;
  curRow.value = {};
  title.value = "添加车位";
}

function unBindHandle(row) {
  ElMessageBox.confirm("确定解除绑定吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    updateBindUnBindMember({
      id: row.id,
      communityMemberId: row.communityMemberId,
      type: 0,
    }).then(({ data }) => {
      if (data) {
        ElMessage({
          message: "解除绑定成功",
          type: "success",
        });
        getList();
      } else {
        ElMessage.error("解除绑定失败");
      }
    });
  });
}

function bindHandle(row) {
  bindMemberDialog.value = true;
  curRow.value = row;
}

function bindFeeHandle(row) {
  showBindFee.value = true;
  curRow.value = row;
  bindIds.value = [row.id];
}

const unBindFeeHandle = (row) => {
  ElMessageBox.confirm("是否确认解除绑定？").then(() => {
    batchClearFeeConfigToParking({
      type: 0,
      communityId: row.communityId,
      parkingIds: [row.id],
    }).then(({ data }) => {
      if (data) {
        ElMessage.success("解除绑定成功");
        getList();
      } else {
        ElMessage.error("解除绑定失败");
      }
    });
  });
};

function deleteHandle(row) {
  ElMessageBox.confirm("确定删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    removeParkingSpace({
      id: row.id,
    }).then(() => {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getList();
    });
  });
}

const selectedRooms = ref([]);

const generatePropertyFeeDialog = ref(false);
const handleSelectionChange = (selection) => {
  selectedRooms.value = selection;
};

const generatePropertyFee = () => {
  if (selectedRooms.value.length === 0) {
    ElMessage.warning("请至少选择一个车位");
    return;
  }
  generatePropertyFeeDialog.value = true;
};

getList();
</script>

<style scoped lang="scss"></style>
